<template>
  <view class="live_box">
    <!-- 头部tab切换 -->
    <view class="live_tab">
      <text :class="data.on === index ? 'live_title' : ''" v-for="(item, index) in data.title" :key="index"
        @click="onTab(item, index)">
        {{ item }}
      </text>
    </view>
    <!-- 列表 -->

    <scroll-view scroll-y class="list">
      <view class="live_list" v-for="(item, index) in data.LiveData" :key="index" @click="onlive(item)">
        <view class="list_img">
          <image src="https://img1.baidu.com/it/u=2578525278,2681164481&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701536400&t=8ab642e3595e9e65e051babebfad9865" mode="scaleToFill" />
          <uni-icons class="loves" type="videocam-filled" color="white" size="40"></uni-icons>
          <text :class="item.status == 1 ? 'list_status' : ''">{{ item.status == 1 ? '正在直播' : '精彩回放' }}</text>
        </view>
        <view class="list_title">{{ item.title }}</view>
        <view class="list_icon">
          <uni-icons type="videocam" color="grey" size="25"></uni-icons>
          <text class="list_time">2023-11-27 14:12:11</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive } from 'vue'
import { http } from '../../utils/http'
const data = reactive({
  LiveData: [],
  newData: [],
  title: ['全部直播', '正在直播', '精彩回放'],
  on: 0
})
// 打乱数组
function randomSortArray(arr) {
  var stack = [];
  while (arr.length) {
    //Math.random()：返回 [0,1) 之间的一个随机数
    var index = parseInt(Math.random() * arr.length);  // 利用数组长度生成随机索引值
    stack.push(arr[index]);  // 将随机索引对应的数组元素添加到新的数组中
    arr.splice(index, 1);  // 删除原数组中随机生成的元素
  }
  return stack;
}
let newarr = []
const getData = async (status, pageCount = 1, pageSize = 100) => {
  data.LiveData == []
  if (newarr.length === 0) {
    let res1 = await http({
      method: "GET",
      url: "/live",
      data: {
        pageCount: pageCount,
        pageSize: pageSize,
        status: '0',
      }
    })
    let res2 = await http({
      method: "GET",
      url: "/live",
      data: {
        pageCount: pageCount,
        pageSize: pageSize,
        status: '1',
      }
    })
    newarr = randomSortArray([...res1.data.data, ...res2.data.data])
    data.newData = newf(newarr)
  // 利用延时器加上i作为一个时间差，做到了一个延时加载
    for (let i = 0; i < data.newData.length; i++) {
      setTimeout(() => {
        data.LiveData = [...data.LiveData, ...data.newData[i]]
      }, 200 * i);
    }
  }
  if (status === '1') {
    data.LiveData = newarr.filter(a => a.status === 1)
  } else if (status === '0') {
    data.LiveData = newarr.filter(a => a.status === 0)
  }else if(status === '2'){
    data.LiveData = newarr
  }
}
// 数据分堆
// 对返回数据进行处理
const newf = (arr, sun = 10) => {
  let newda = []
  let i = 0
  while (i <= arr.length) {
    newda.push(arr.slice(i, i + 10))
    i = i + 10
  }
  return newda
}
onLoad(async () => {
  getData()
})
// tab切换
const onTab = async (item, index) => {
  data.on = index
  if (item === '正在直播') {
    getData('1')
  } else if (item === '精彩回放') {
    getData('0')
  } else {
    getData('2')
  }

}
// 进入直播
const onlive = (item) => {
  if (item.status === 1) {
    uni.navigateTo({
      url: '../live/live?item=' + JSON.stringify(item),
    })
  } else {
    uni.navigateTo({
      url: '../video/video?item=' + JSON.stringify(item)
    })
  }
}
</script>

<style lang="scss" scoped>
.live_box {

  padding: 20rpx;

  .live_tab {
    background: #F5F5F5;
    position: fixed;
    display: flex;
    top: 0;
    justify-content: space-around;
    padding: 20rpx 0;
    z-index: 999;
    width: 100vw;
    left: 0;

    text {
      padding: 10rpx 50rpx;
      background: #ececec;
      border-radius: 8rpx;
      color: rgb(45, 45, 45);
      border: 3rpx solid #E8E8E8;
      // margin-left: 15rpx;
    }

    .live_title {
      background: #FFF2F3;
      box-sizing: border-box;
      border: 3rpx solid #FF4F61;
      color: #FF4F61;

    }
  }

  .list {
    padding-top: 70rpx;
  }

  .live_list {
    padding: 20rpx;
    background: #f0f0f0;
    border-radius: 12rpx;
    margin-top: 30rpx;
  }

  .list_img {
    position: relative;
    width: 100%;
    height: 300rpx;

    image {
      width: 100%;
      height: 100%;
    }

    text {
      position: absolute;
      left: 2rpx;
      top: 10rpx;
      background: #98AAD8;
      color: white;
      font-size: 24rpx;
      padding: 15rpx 50rpx;
      border-radius: 50rpx;
    }

    .loves {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 120rpx;
      height: 120rpx;
      border: white solid 5rpx;
      border-radius: 70rpx;
      line-height: 120rpx;
      text-align: center;
    }

    .list_status {
      background: linear-gradient(to right, #FB9F68, #FA7566);
    }

  }

  .list_title {
    font-size: 26rpx;
    font-weight: bold;
    line-height: 80rpx;
  }


}

.list_icon {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 50rpx;
  font-size: 24rpx;
  color: grey;
}
</style>